<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('登录日志列表')" />
	<style type="text/css">
		.layui-col-sm4 {width: 20%;}
	</style>
</head>
<body class="no-skin">
<div class="main-container" id="main-container">
	<div class="main-content">
		<div class="north">
			<div class="north-content">
				<form class="layui-form dis-ctr" >
					<div class="layui-form layui-card-header layuiadmin-card-header-auto">
						<div class="layui-form-item">
							<div class="layui-inline layui-col-sm4">
								<label class="layui-form-label">登录名称：</label>
								<div class="layui-input-block">
									<input id="loginName-kw" type="text" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-inline layui-col-sm4">
								<label class="layui-form-label">登录地址：</label>
								<div class="layui-input-block">
									<input id="ipaddr-kw" type="text" autocomplete="off" class="layui-input">
								</div>
							</div>
							<div class="layui-inline layui-col-sm4" style="width:16%;">
								<label class="layui-form-label">登录状态：</label>
								<div class="layui-input-block">
									<select id="status-kw" name="status-kw">
										<option value="">所有</option>
										<option value="0">成功</option>
										<option value="1">失败</option>
									</select>
								</div>
							</div>
							<div class="layui-inline layui-col-sm4">
								<label class="layui-form-label">登录时间：</label>
								<div class="layui-input-block">
									<input style="display: none;" id="startTime" name="startTime">
									<input style="display: none;" id="endTime" name="endTime">
									<input id="time-kw" type="text" autocomplete="off" class="layui-input"><i class="fa fa-calendar icon_date_search"></i>
								</div>
							</div>
							<div class="layui-inline layui-col-sm4">
								<a class="layui-btn layuiadmin-btn-order fa fa-search" id="btn-search"><span class="fa_span">查询</span></a>
								<button type="reset" class="layui-btn layui-btn-primary fa fa-refresh" ><span class="fa_span">重置</span></button>
							</div>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="mid-content">
			<table class="layui-hide" id="dhTable" lay-filter="ftable"></table>
		</div>
	</div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
	/*<![CDATA[*/
	var prefix = ctx + "system/loginlog";
	/*]]>*/
</script>
<script type="text/javascript">
	layui.use(['laydate', 'table','form','layer','jquery','upload'], function () {
		var $ = layui.$,layer = layui.layer,form = layui.form,table = layui.table,laydate = layui.laydate,upload = layui.upload;
		$.tablelist.init({
			elem: '#dhTable'
			,modalName: "登录日志"
			,url: prefix + "/list"
			,defaultToolbar: ['filter', 'print', 'exports']
			,initSort: {field: 'id',type: 'desc'}
			,where: {
				field: 'id' //排序字段
				,order: 'desc' //排序方式
			}
			,sort:true
			,cols: [[
				{type:'numbers',title:''},
				{field: 'id',title: '编号',width:90},
				{field: 'loginName',title: '登录名称',width:120, sort: true},
				{field: 'ipaddr',title: '登录地址',width:120, sort: true},
				{field: 'loginLocation',title: '登录地点',width:150, sort: true},
				{field: 'browser',title: '浏览器',width:150, sort: true},
				{field: 'os',title: '操作系统',width:150, sort: true},
				{field: 'msg',title: '提示信息',width:260},
				{field: 'status',title: '登录状态',width:100, sort: true, align:'center',templet:function(rec){ return ((rec.status == "0")  ? "成功":"<span style='color:red'>失败</span>"); }},
				{field: 'createTime',title: '登录时间',width:170, sort: true}
			]
			]
			,height:'full-' + ( $('.north').height()+36),
		});
		//时间控件
		laydate.render({
			elem: '#time-kw',
			type:'datetime',
			range: '~',
			done: function (value, date, endDate) {
				var hours = endDate.hours;
				var minutes = endDate.minutes;
				var seconds = endDate.seconds;
				if (hours == "0" && minutes == "0" && seconds == "0"){
					$(".layui-laydate-footer [lay-type='datetime'].laydate-btns-time").click();
					// 改变结束时间默认值
					$(".laydate-main-list-1 .layui-laydate-content li ol li:last-child").click();
				}
				var splitArray = value.split('~');
				var startTime = (splitArray.length > 0) ? splitArray[0] :"";
				var endTime  =  (splitArray.length > 1) ?  splitArray[1] :"";
				$('#startTime').val(startTime);
				$('#endTime').val(endTime);
			}
		});
		//监听排序事件
		table.on('sort(ftable)', function(obj){
			$.tablelist.sort('dhTable',obj);
		});
		var active = {
			reload: function (formData) {
				table.reload('dhTable', {
					page: {
						curr: 1 //重新从第 1 页开始
					},
					where:{
						loginName:$("#loginName-kw").val(),
						ipaddr:$("#ipaddr-kw").val(),
						status:$("#status-kw").val(),
						startTime:$("#startTime").val(),
						endTime:$("#endTime").val()
					}
				});
			},
		};
		$('#btn-search').on('click', function () {
			active['reload'].call(this);
		});
		//重新加载
		function allReload(result){
			if(result.code==0){
				setTimeout(function(){
					layer.closeAll();
					table.reload('dhTable', {url: prefix + "/list",page:{curr: 1}});
				}, 1000);
			}
		}
	})
</script>
</body>
</html>